<!--
 * @description: 
 * @Date: 2022-10-10 23:54:34
 * @LastEditTime: 2022-12-04 19:49:32
-->
<template>
  <div
    @contextmenu.preven
    class="w-full h-full weather"
    @click="redirectUrl('tab://weatherWindow')"
  >
    <div v-if="RC == '1x1'" class="w-full h-full flex items-center justify-center">
      <svg
        width="38"
        height="38"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9.15039 9.15088L11.3778 11.3783"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M3 24H6.15"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M9.15039 38.8495L11.3778 36.6221"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M38.8495 38.8495L36.6221 36.6221"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M44.9996 24H41.8496"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M38.8495 9.15088L36.6221 11.3783"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M24 3V6.15"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M24 36C30.6274 36 36 30.6274 36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36Z"
          fill="#FFCE08"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M24 45.0001V41.8501"
          stroke="#FFCE08"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <iframe
      class="pointer-events-none translate-x-3 translate-y-5"
      v-if="RC == '2x2'"
      scrolling="no"
      src="https://tianqiapi.com/api.php?style=ty&skin=pitaya"
      frameborder="0"
      width="100%"
      height="100%"
      allowtransparency="true"
    ></iframe>
    <iframe
      class="pointer-events-none translate-y-2"
      v-if="RC == '2x4'"
      scrolling="no"
      src="https://tianqiapi.com/api.php?style=ya&skin=pitaya"
      frameborder="0"
      width="100%"
      height="100%"
      allowtransparency="true"
    ></iframe>
  </div>
</template>
<script setup>
import { ref, onUnmounted, defineProps, watch } from "vue";
import ajax from "../../util/ajax";
import cache from "../../util/cache";
import emitter from "@/util/emitter.js";
import redirectUrl from "../../util/href";
const props = defineProps({
  data: { type: Object, default: () => ({ size: "1x1" }) },
});
const ip = ref(cache.get("ip", false));
const list = ref(cache.get("baiduTopSearch", []));
const RC = ref(props.data.size);
const refresh = (data) => {
  RC.value = data.size;
};
if (props.data?.id) {
  watch(props.data, (e) => {
    refresh(e);
  });
}
ajax({
  url: "/api/getIp",
}).then((el) => {
  if (el.code == 1 && el.data) {
    cache.set("ip", el.data);
    ip.value = el.data;
  } else {
    ip.value = "北京";
  }
});
</script>
<style lang="less">
.weather {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}
</style>
